<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>

</head>
<body>

<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>课程名称</th>
      <th>所属学院</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>JavaScript</td>
      <td>前端与移动开发学院</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>css</td>
      <td>前端与移动开发学院</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>html</td>
      <td>前端与移动开发学院</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>jQuery</td>
      <td>前端与移动开发学院</td>
    </tr>
    <tr>
      <td><input type="checkbox"/></td>
      <td>HTML5</td>
      <td>前端与移动开发学院</td>
    </tr>
    <tr>
      <td><input type="checkbox"/></td>
      <td>CSS3</td>
      <td>前端与移动开发学院</td>
    </tr>
    </tbody>
  </table>
</div>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  /**
   *  1. 点击全选，下面的checkbox的选择状态跟全选是一致的
   *  2. 点击项的checkbox的时候，如果都被选中了，全选也跟着被选中，否则全选不选中
   */

    //建议先把多个功能都用到的元素先使用全局变量存储起来，使用的时候就不用重复获取了
  var j_cbAll = $("#j_cbAll");
  var cks = $("#j_tb input[type = checkbox]");
  //点击全选控制下面的所有checkbox的状态
  j_cbAll.click(function () {
    //获取全选的状态
    var statu = j_cbAll.prop("checked");
    //设置状态
    cks.prop("checked", statu);
  });
  //点击cks，控制全选状态
  cks.click(function () {
    //判断，当选中的个数和所有的个数是否相等来控制全选的状态
    if ($("#j_tb input:checked").size() == cks.size()) {
      j_cbAll.prop("checked", true);
    } else {
      j_cbAll.prop("checked", false);
    }
  });

</script>